{% set clazz = "packages"; %}
{% set title = "流量兑换" %}
{% extends './modules/common/templates/main.html' %}
{% block style %}
  <link rel="stylesheet" type="text/css" href="{{ '/static/css/integral.css'|version }}" />
{% endblock %}
{% block content %}
  {% if !nested %}
    <header class="bar bar-header">
      {{ macro.back() }}
      <h1 class="title">{{ title }}</h1>
    </header>
  {% endif %}
  <section>
    <form autocomplete="off" onsubmit="return false;">
      <div class="list compact overlap">
        <div class="item item-input">
          <span class="control">
            <input type="tel" name="mobile" pattern="[0-9]*" maxlength="11" value="{{ mobile }}" placeholder="请输入您的手机号码 (仅限中国大陆)" />
          </span>
        </div>
      </div>
    </form>
    <div class="vspace" ui-mode="20px">
      <div id="packages" class="list pkgs">
        {% for item in list %}
          <div class="item item-input">
            <span class="text">
              <span class="name">{{ item.goodsName }}</span>
              <span class="text-xs text-orange">({{ item.consumeIntegral }}积分)</span>
            </span>
            <span class="interact">
              {% if item.exchangeStatus === 0 %}
                <button class="button text-blue exchange" data-id="{{ item.id }}" data-type="FLOW" data-name="{{ item.goodsName }}" data-integral="{{ item.consumeIntegral }}" disabled>兑换</button>
              {% else %}
                <button class="button text-blue exchange" data-id="{{ item.id }}" data-type="FLOW" data-name="{{ item.goodsName }}" data-integral="{{ item.consumeIntegral }}">兑换</button>
              {% endif %}
            </span>
          </div>
        {% endfor %}
        {% if list.length && list[0].exchangeStatus === 0 %}
          <div class="vspace hspace" ui-mode="30px">
            <div class="text text-xs text-center text-gray">每月最后两天，中国移动进入清算周期，不支持兑换</span>
          </div>
        {% endif %}
      </div>
    </div>
    <div class="vspace" ui-mode="30px">
      <div class="text-sm text-gray text-center">
        <p><a class="center-block text-gray" href="/integral/instruction">兑换说明</a></p>
        <p>如有疑问，请致电：<a class="text-blue" href="tel:4000818181">4000818181</a></p>
      </div>
    </div>
  </section>
  {% raw %}
    <script id="packagesTempl" type="text/swig-template">
      {% for item in list %}
        <div class="item item-input">
          <span class="text">
            <span class="name">{{ item.goodsName }}</span>
            <span class="text-xs text-orange">({{ item.consumeIntegral }}积分)</span>
          </span>
          <span class="interact">
            {% if item.exchangeStatus === 0 %}
              <button class="button text-blue exchange" data-id="{{ item.id }}" data-type="FLOW" data-name="{{ item.goodsName }}" data-integral="{{ item.consumeIntegral }}" disabled>兑换</button>
            {% else %}
              <button class="button text-blue exchange" data-id="{{ item.id }}" data-type="FLOW" data-name="{{ item.goodsName }}" data-integral="{{ item.consumeIntegral }}">兑换</button>
            {% endif %}
          </span>
        </div>
      {% endfor %}
      {% if list.length && list[0].exchangeStatus === 0 %}
        <div class="vspace hspace" ui-mode="30px">
          <div class="text text-xs text-center text-gray">每月最后两天，中国移动进入清算周期，不支持兑换</span>
        </div>
      {% endif %}
    </script>
  {% endraw %}
{% endblock %}

{% block script %}
  {% parent %}
  <script src="{{ '/static/js/integral.js'|version }}"></script>
{% endblock %}